<template>
    <div class="header-contain">
        <div class="left">
            <div v-for="(item, idx) in headerList" :key="idx">
                <span :class="{'bread-crumb': true, activeColor: headerList.length-1 === idx}">{{item}}</span>
                <img src="../../src/assets/img/welcome/line.png" alt="" class="line" v-if="headerList.length-1 !== idx">
                <img src="../../src/assets/img/welcome/lineLast.png" alt="" class="line" v-else>
            </div>
        </div>
        <div class="right">
            <img :src="teachInfo.img" alt="">
            <div class="name-content">
                <span>{{teachInfo.realname}}</span>
                <span class="grey-name">{{teachInfo.level}}</span>
            </div>
            <div class="out-btn" @mouseenter="enter" @mouseleave="leave" @click="goLoginOut">
                <img src="../../src/assets/img/welcome/arrow.png" alt="" class='out-img' v-if="!showWhite">
                <img src="../../src/assets/img/welcome/arrowWhite.png" alt="" class='out-img' v-else>
                <span>退出</span>
            </div>
        </div>
    </div>
</template>

<script>
import { loginOutTeacher } from '@/api/login'
import { geTeacherInfo } from '@/api/home'
import { removeKey } from '@/utils/tool'
export default {
    name: 'Header',
    data() {
        return {
            showWhite: false,
            teachInfo: {}
        }
    },
    mounted() {
        this.geTeacherInfo()
    },
    methods: {
        enter() {
            this.showWhite = true
        },
        leave() {
            this.showWhite = false
        },
        goLoginOut() {
            loginOutTeacher({}).then(res => {
                if (res.code == 1) {
                    this.$message({
                        message: '退出成功',
                        type: 'success'
                    })
                    removeKey('token')
                    this.$router.push({
                        path: '/login'
                    })
                }
            })
        },
        geTeacherInfo() {
            geTeacherInfo({}).then(res => {
                if (res.code == 1) {
                    this.teachInfo = res.data
                }
            })
        }
    },
    props: {
        headerList: {
            type: Array,
            default: function () {
                return []
            }
        }
    }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    @import url('../../src/assets/less/Mixins.less');
    @import url('../../src/assets/less/common.less');

    .out-btn {
        cursor: pointer;
        width: 73px;
        height: 34px;
        border-radius: 2px;
        // opacity: 0.2733;
        border: 1px solid rgba(169, 169, 169, 0.2733);
        font-size: 14px;
        color: #55A8FD;

        &:hover {
            background: #55A8FD;
            color: #fff;
        }

        .out-img {
            width: 10px;
            height: 12px;
            position: relative;
            left: 13px;
            top: 8px;
        }

        span {
            position: relative;
            left: 13px;
            top: 7px;
        }
    }

    .left {
        /*width: calc(100% - 250px);*/
        text-align: left;
        float: left;
        color: #697B8C;
        .bread-crumb {
            cursor: pointer;
        }
        .activeColor {
            color: #00a0e9;
        }

        span {
            position: relative;
            top: -32px;
            /*left: -8px;*/
        }

        img {
            margin-left: 20px;
        }

        div {
            display: inline-block;
            padding: 0px 10px;
        }

        div:first-child {
            padding-left: 22px;
        }

        .line {
            height: 80px;
            width: 5px;
        }
    }

    .right {
        text-align: left;
        width: 240px;
        /*line-height: 80px;*/
        float: right;
        padding-right: 30px;
        .flex(row, space-between, center, nowrap);

        img {
            height: 48px;
            display: inline-block;
            position: relative;
            top: 12px;
        }

        .name-content {
            width: 90px;
            display: inline-block;
            position: relative;
            top: 10px;
            left: 4px;

            span {
                display: block;
            }

            .grey-name {
                font-size: 12px;
                font-family: PingFang-SC-Regular;
                font-weight: 400;
                color: rgba(105, 123, 140, 1);
                position: relative;
                top: 4px;
            }
        }

        .out-btn {
            position: relative;
            top: 13px;
        }
    }

</style>
